<template>
  <NavBar />
  <div class="article" v-if="article">
    <h1 class="title">{{ article.title }}</h1>

    <section>
      <span class="author">作者：{{ article.author }}</span>
      <span class="category">分类：{{ article.category }}</span>
    </section>
    <section>
      <span class="click">点击：{{ article.click }}</span>
      <span class="like">喜欢：{{ article.like }}</span>
      <span class="fav">收藏：{{ article.fav }}</span>
    </section>
    <article class="content" v-html="article.body"></article>

    <TabBar />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { fetchNewsDetail } from '@/api/index.js'
const article = ref(null)
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})

watch(
  props.id,
  async (newId) => {
    if (newId) {
      const response = await fetchNewsDetail(newId)
      console.log('response', response)
      article.value = response.data
    }
  },
  { immediate: true },
)

onMounted(async () => {
  const response = await fetchNewsDetail(props.id)
  console.log('onMounted', response)
  article.value = response.data
})
</script>

<style scoped>
.article {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.article .title {
  font-size: 16px;
  text-align: center;
}

section {
  font-size: 14px;
  /* padding: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.article .content :deep(img) {
  display: block;
  width: 100%;
  height: auto;
}
</style>
